<template>
  <div class="flex">
    <div v-for="(item,index) in productList" :key="item.title" class="product-item xl:block" :class="{
      'hidden':index>0,
      'md:block':index<2
    }">
      <img :src="item.imgUrl" alt="" class="product-item-cover">
      <div class="product-item-content px-8">
        <h5 class="text-2xl text-white text-center mb-8">{{ item.title }}</h5>
        <div class="desc text-sm text-white">{{ item.desc }}</div>
        <div class="nav-list">
          <ul class="flex list-disc flex-wrap items-start">
            <li v-for="child in item.children" :key="child.id" class="cursor-pointer text-white w-1/3 text-sm mb-4">
              <nuxt-link to="" class="pr-4">{{ child.name }}</nuxt-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup >
const productList = ref([
  {
    title: "昆仑通态",
    desc: "V/F 正弦脉宽调制模式、开环矢量控制模式、闭环矢量控制模式和直接转矩控制模式变频器",
    imgUrl: "http://www.kgznkj.cn/upload/weixin/202210141618387537.jpg",
    children: [
      {
        id: 1,
        name: "E系列",
      },
      {
        id: 2,
        name: "K系列",
      },
      {
        id: 3,
        name: "N系列",
      },
      {
        id: 4,
        name: "G系列",
      },
      {
        id: 5,
        name: "系列详情",
      },
      {
        id: 6,
        name: "B系列",
      },
      {
        id: 7,
        name: "HDMI智能终端",
      },
      {
        id: 7,
        name: "新款 T 系列",
      },
    ],
  },
  {
    title: "康工智能",
    desc: "",
    imgUrl: "http://www.kgznkj.cn/upload/weixin/202402281048166625.jpg",
    children: [
      {
        id: 1,
        name: "PLC一体机",
      },
      {
        id: 2,
        name: "运动控制器",
      },
      {
        id: 3,
        name: "单板PLC",
      },
    ],
  },
  {
    title: "VEICHI伟创",
    desc: "",
    imgUrl: "http://www.kgznkj.cn/upload/weixin/202402281048327948.jpg",
    children: [
      {
        id: 1,
        name: "伺服与运动控制",
      },
      {
        id: 2,
        name: "变频器",
      },
    ],
  },
]);
</script>
<style scoped lang='scss'>
.product-item {
  position: relative;
  overflow: hidden;
  &-cover {
    width: 100%;
    height: 100%;
    transition: all ease-in 0.7s;
    object-fit: cover;
  }
  &-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all ease-in 0.7s;
    padding-top: 20px;
    .desc {
      position: absolute;
      padding-right: 30px;
      transition: all ease-in 0.7s;
    }
    .nav-list {
      opacity: 0;
      transition: all ease-in 0.7s;
    }
  }
  &:hover {
    .product-item-cover {
      transform: scale(1.1);
    }
    .product-item-content {
      background-color: rgba($color: $primary, $alpha: 0.8);
      .desc {
        opacity: 0;
      }
      .nav-list {
        opacity: 1;
      }
    }
  }
}
</style>